<template>
  <div class="order_list">
    <div class="list" v-for="(item,index) in dataList" :key="item.order_id">
      <div class="list_head">
        <div class="list_head_left">
          <img :src="item.store_logo" alt>
          &nbsp;{{item.store_name}}&nbsp;
          <i class="iconfont iconrightArrow"></i>
        </div>
        <div class="list_head_right">{{item.order_state_name}}</div>
      </div>

      <div class="list_con">
        <div
          class="list_con_list"
          v-for="(it,inds) in item.goods_list"
          @click="toDedails(index,item.order_id)"
          data-ind="index"
        >
          <div class="list_con_list_left">
            <img :src="it.goods_info.goods_thumb" alt>
          </div>
          <div class="list_con_list_right">
            <div class="list_con_list_right_top">
              <div class="list_con_list_right_top_name">
                <span>{{it.goods_info.goods_name}}</span>
              </div>
              <div class="list_con_list_right_top_spec">{{it.goods_ext_info.goods_ext_style}}</div>
            </div>
            <div class="list_con_list_right_bot">¥{{it.goods_ext_info.goods_price}}</div>
          </div>
          <div class="list_con_list_numaber">x{{it.goods_num}}</div>
        </div>

        <!-- 合计 -->
        <div class="total">
          共{{item.goods_num}}件商品&nbsp;&nbsp;&nbsp;合计：
          <span>¥{{item.goods_amount}}</span>
        </div>
        <!-- 合计 end-->
        <!-- 已付款 -->
        <div class="set_box" v-if="item.order_state==2">
          <div class="set_box_btn">联系买家</div>
          <div class="set_box_btn">接单</div>
        </div>
        <!-- 已付款 end-->
        <!-- 已退款 -->
        <div
          class="set_box"
          v-else-if="item.order_state==4||item.order_state ==4||item.order_state==5"
        >
          <div class="set_box_btn" @click="tologistical(item.order_id,item.order_state)">查看物流</div>
          <div class="set_box_btn">联系买家</div>
        </div>
        <!-- 已退款 end-->
        <!-- 待退款 -->
        <div class="set_box" v-else-if="item.order_state==9">
          <!-- <div class="set_box_btn">拒绝</div> -->
          <div class="set_box_btn" @click="toDedails(index,item.order_id)">同意退款</div>
        </div>
        <!-- 待退款 end-->
        <!-- 待发货 -->
        <div class="set_box" v-else-if="item.order_state==3">
          <div class="set_box_btn">联系买家</div>
          <div class="set_box_btn" @click="send_goods(item.order_id)">发货</div>
        </div>
        <!-- 待发货 end-->
        <!-- s -->
        <div class="set_box" v-else-if="item.order_state==8||item.order_state==10">
          <div class="set_box_btn" @click="order_delete_post(item.order_id,index)">删除订单</div>
        </div>
        <!-- s -->
        <div class="set_box" v-else-if="item.order_state==7">
          <div class="set_box_btn" @click="order_delete_post(item.order_id,index)">删除订单</div>
          <div class="set_box_btn" @click="tologistical(item.order_id)">查看物流</div>
          <div class="set_box_btn">联系买家</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dataList", "orderStatu"],
  data() {
    return {
      ind: 0, //五个订单状态
      inds: 0 //顶部的选项卡状态
    };
  },
  methods: {
    toDedails(index, order_id) {
      // this.inds = orderStatu.inds;
      // this.ind = orderStatu.ind;
      this.$router.push({
        path: "/orderDetails",
        query: { statu: index, order_id: order_id }
      });
    },
    // 删除订单
    order_delete_post(order_id, index) {
      this.appJS.ajax(
        "user.order_delete_post",
        "post",
        {
          order_id: order_id
        },
        res => {
          if (res.recode == 1) {
            this.$emit("order_delete_post", index);
          }
        }
      );
    },
    // 发货
    send_goods(order_id) {
      this.$router.push({ path: "/Sendgoods", query: { order_id: order_id } });
    },
    // 查看物流
    tologistical(order_id) {
      this.$router.push({ path: "/logistical", query: { order_id: order_id } });
    }
  },
  components: {},
  mounted() {}
};
</script>

<style scoped lang='less'>
@co: rgb(236, 79, 70);
.order_list {
  .list {
    background: #fff;
    margin-bottom: 0.5rem;
    &:last-child {
      margin-bottom: 0;
    }
    .list_head {
      height: 2.5rem;
      width: 100%;
      padding: 0 0.5rem;
      background: #fff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .list_head_left {
        height: 100%;
        width: 70%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          height: 1.5rem;
          width: 1.5rem;
          border-radius: 100%;
        }
        font-size: 0.7rem;
        color: #888;
      }
      .list_head_right {
        height: 100%;
        width: 30%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 0.7rem;
        color: rgb(240, 128, 60);
      }
    }
    .list_con {
      .list_con_list {
        height: 25vw;
        width: 100%;
        padding: 0 0.5rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        border-bottom: 1px solid #efefef;
        &:last-child {
          border-bottom: 0;
        }
        .list_con_list_numaber {
          position: absolute;
          right: 0.5rem;
          bottom: 0.5rem;
          font-size: 0.9rem;
        }
        .list_con_list_left {
          height: 100%;
          width: 23vw;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            height: 20vw;
            width: 20vw;
            border-radius: 5px;
          }
        }
        .list_con_list_right {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          height: 20vw;
          width: calc(100% - 23vw);
          .list_con_list_right_top {
            height: 60%;
            width: 100%;
            font-size: 0.7rem;
            .list_con_list_right_top_name {
              span {
                .text(1);
              }
            }
            .list_con_list_right_top_spec {
              color: #888;
              font-size: 0.6rem;
              margin-top: 0.2rem;
            }
          }
          .list_con_list_right_bot {
            color: @co;
            font-size: 0.9rem;
          }
        }
      }
      .total {
        height: 2.5rem;
        width: 100%;
        padding: 0 0.5rem;
        font-size: 0.6rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-bottom: 1px solid @bg_color;
        span {
          font-size: 0.9rem;
          color: @co;
        }
      }
      .set_box {
        height: 3rem;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .set_box_btn {
          height: 2rem;
          width: 20vw;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 100px;
          font-size: 0.7rem;
          margin-right: 0.5rem;
          color: #888;
          border: 1px solid #ddd;
          &:active {
            background: #efefef;
          }
          &:last-child {
            color: @co;
            border: 1px solid @co;
            &:active {
              background: rgba(236, 79, 70, 0.22);
            }
          }
        }
      }
    }
  }
}
</style>
